<template>
  <div class="listBox">
    <ul class="ul-box">
      <li v-for="(item, index) in list" :key="index">
        <div class="title-box">
          <i :class="item.icon" class="title-icon" />
          <div class="title-middle">
            <div class="title-middle-top">
              <span class="title-middle-head">
                <router-link :to="item.link">{{ item.title }}</router-link>
              </span>
              <el-tooltip
                v-if="item.status"
                class="item"
                effect="dark"
                content="点击关闭服务"
                placement="top-start"
              >
                <i class="el-icon-switch-button switch-icon" />
              </el-tooltip>
            </div>
            <div v-if="item.hint" class="title-middle-hint">{{ item.hint }}</div>
          </div>
          <div class="title-right">
            <div v-if="!item.infoTag[0]" style="color:red">未开通</div>
            <template v-for="(item1, index1) in item.infoTag">
              <div v-if="item.infoTag" :key="index1" class="title-right-row">
                <span v-if="item1.tagNum" class="title-right-tagNum">{{ item1.tagNum }}</span>
                <span>{{ item1.tagTitle }}</span>
              </div>
            </template>
          </div>
        </div>
        <div class="btn-box">
          <div class="btn-box-left">
            <template v-for="(item2, index2) in item.setBtn">
              <router-link :to="item2.link" :key="index2">
                <el-button size="mini">{{ item2.name }}</el-button>
              </router-link>
            </template>
          </div>
          <div v-if="item.more" class="btn-box-right">
            <router-link :to="item.link">
              <el-button type="primary" size="mini">更 多</el-button>
            </router-link>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          status: true,
          icon: 'el-icon-school',
          title: '网校设置',
          hint: '(录播+文件)',
          link: '/index',
          more: true,
          infoTag: [
            {
              tagNum: '12',
              tagTitle: '网校模板配置'
            },
            {
              tagNum: '12',
              tagTitle: '网校页面优化'
            },
            {
              tagNum: '12',
              tagTitle: '网校推广管理'
            }
          ],
          setBtn: [
            {
              link: '',
              name: '首页导航'
            },
            {
              link: '',
              name: '尾页导航'
            },
            {
              link: '',
              name: '首页模板'
            },
            {
              link: '',
              name: 'SEO设置'
            },
          ]
        },
        {
          id: 2,
          status: true,
          icon: 'el-icon-mobile-phone',
          title: 'APP',
          hint: '',
          link: '/index',
          more: true,
          infoTag: [
            {
              tagNum: '',
              tagTitle: 'APP网校'
            },
            {
              tagNum: '',
              tagTitle: 'APP题库'
            }
          ],
          setBtn: [
            {
              link: '',
              name: '设置'
            }
          ]
        },
        {
          id: 3,
          status: false,
          icon: 'el-icon-postcard',
          title: '分校管理',
          hint: '',
          link: '/index',
          more: false,
          infoTag: [],
          setBtn: [
            {
              link: '',
              name: '分校设置'
            }
          ]
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.listBox {
  padding: 20px 0;
  .ul-box {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    align-items: center;
    li {
      width: 24%;
      margin-right: 20px;
      font-size: 12px;
      background-color: #f6f6f6;
      color: #898989;
      padding: 20px;
      // height: 200px;
      .title-box {
        display: flex;
        .title-icon {
          font-size: 50px;
          color: #409eff;
          cursor: pointer;
        }
        .title-middle {
          margin-left: 20px;
          .title-middle-top {
            color: #666;
            font-size: 14px;
            cursor: pointer;
            .switch-icon {
              margin-left: 5px;
            }
          }
          .title-middle-head:hover {
            color: #00b7ee;
          }
          .title-middle-hint {
            color: #fa6900;
            margin: 10px 0;
          }
        }
        .title-right {
          margin-left: auto;
          text-align: right;
          .title-right-row {
            margin: 5px 0;
            .title-right-tagNum {
              color: #1cbdef;
              margin: 0 10px;
            }
          }
        }
      }
      .btn-box {
        margin-top: 20px;
        display: flex;
        align-items: center;
        .btn-box-left {
          /deep/.el-button--mini {
            padding: 7px 6px;
          }
        }
        .btn-box-right {
          margin-left: auto;
        }
      }
    }
    li:nth-child(4n) {
      margin-right: 0;
    }
  }
}
</style>
